<template>
  <div class="icons">
    <div
      v-for="(name, index) in icons"
      :key="index"
      @click="copy(name)"
    >
      <icon :name="name" :size="100" />
      {{ name }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Icons',
  data () {
    return {
      icons: []
    }
  },

  mounted () {
    this.initIconNames()
  },

  methods: {
    initIconNames () {
      const req = require.context('@/assets/icon', false, /\.svg$/)
      this.icons = req.keys().map((item) => {
        return item.replace(/\.\/(.*)\.svg/, '$1')
      })
      console.log(this.icons)
    },
    copy (name) {
      var oInput = document.createElement('input')
      oInput.value = name
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      document.execCommand('Copy') // 执行浏览器复制命令
      document.body.removeChild(oInput)
    }
  }
}
</script>

<style lang="scss" scoped>
.icons {
  @include flex(row);
  flex-wrap: wrap;
  & > {
    div {
      @include flex(column, center, center);
      width: 25%;
      padding: 20px;
      text-align: center;
    }
  }
}
</style>
